<template>
	<view class="orderDetails">
		<view class="line">
			<text>需求类型</text>
			<text>{{info.trade_type_name}}</text>
		</view>
		<view class="line">
			<text>需求状态</text>
			<text>{{info.status_name}}</text>
		</view>
		<view class="line">
			<text>发布时间</text>
			<text>{{info.create_time}}</text>
		</view>
		<view class="line">
			<text>需求价格</text>
			<text>￥{{info.trade_price}}</text>
		</view>
		<view class="line">
			<text>需求数量</text>
			<text>{{info.trade_num}}g</text>
		</view>
		<view class="line">
			<text>确定数量</text>
			<text>{{info.confirm_num}}g</text>
		</view>
		<view class="line">
			<text>剩余数量</text>
			<text>{{info.surplus_num}}g</text>
		</view>
		<view class="line" v-if="info.order_list.length > 0" style="border-top: 10rpx rgba(57, 72, 107, 0.1) solid;">
			<text>{{info.order_title}}</text>
			<text></text>
		</view>
		<view class="content" v-for="(item,index) in info.order_list" :key="index">
			<view class="title" >
				<view>编号：{{item.order_sn}}</view>
				<view>{{item.status_name}}</view>
			</view>
			<view class="title" >
				<view style="width: 50%;">{{item.member_name}}</view>
				<view style="width: 50%;" @click="callPhone(item.mobile)">{{item.mobile}}</view>
			</view>
			<view class="list" >
				<view>需求价格<br>￥{{item.price}}</view>
				<view>需求克数<br>{{item.num}}g</view>
				<view>总金额<br>{{item.total_money}}g</view>
				<view>
					<view :class="item.is_sub == 1 ? 'btn' : ''"  @click="confirmItem(index)">{{item.is_sub == 1 ? '确定' : '-'}}</view>
				</view>
			</view>
		</view>
		<view class="bot" v-if="info.button_list.length > 0">
			<view v-if="info.button_list.length > 0" :class="info.button_list.length == 1 ? 'txt1' : 'txt2'">
				<text v-for="(button,index2) in info.button_list" :key="index2" @click="operateFun(button.type)">{{button.name}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				id : 0,
				info : {
					trade_price: 0,
					trade_num: 0,
					confirm_num: 0,
					surplus_num: 0,
					need_sub_num: 0,
					trade_type_name: '买入',
					status: 1,
					status_name: '进行中',
					order_title: '卖出列表',
					create_time: '',
					order_list: [],
				},
			}
		},
		methods: {
			getInfo() {
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				var self = this;
				serve.request({
					url: '/tea/trade/view',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: self.id
					}
				}).then(res => {
					if(res.code != 200) {
						uni.showModal({
						    title: '错误提示',
						    content: res.message,
							showCancel:false,
						    success: function (res) {
						        if (res.confirm) {
									common.jump("return_one");
								}
							},
						});
						return ;
					}
					uni.hideLoading();
					self.info = res.data;
				});
			},
			confirmItem(k) {
				uni.showLoading({
					title: '操作中···',
					mask: true
				});
				let item = this.info.order_list[k];
				serve.request({
					url: '/tea/trade/sub-order',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: item.orderId,
						tradeId: this.id
					}
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						title:res.message,
						icon: 'none',
					});
					if(res.code == 200) {
						this.$set(item, 'is_sub', 0);
						this.$set(item, 'status', res.data.status);
						this.$set(item, 'status_name', res.data.status_name);
						console.info(this.info.need_sub_num);
						this.info.need_sub_num = Number(this.info.need_sub_num) - 1;
						console.info(this.info.need_sub_num);
						this.checkSubList();
					}
				});
			},
			operateFun(type) {
				var self = this;
				if(type == "cancel") {
					uni.showModal({
					    title: '温馨提示',
					    content: "您确定要取消该需求吗",
					    success: function (res) {
					        if (res.confirm) {
								self.cancelFun();
							}
						},
					});
					return ;
				} else if(type == "all_sub") {
					uni.showLoading({
						title: '操作中···',
						mask: true
					});
					serve.request({
						url: '/tea/trade/all-sub',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							id: self.id
						}
					}).then(res => {
						uni.hideLoading();
						uni.showToast({
							title:res.message,
							icon: 'none',
						});
						if(res.code == 200) {
							self.getInfo();
						}
					});
				}
				return ;
			},
			cancelFun(){
				uni.showLoading({
					title: '操作中···',
					mask: true
				});
				serve.request({
					url: '/tea/trade/cancel',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: this.id
					}
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						title:res.message,
						icon: 'none',
					});
					if(res.code == 200) {
						this.info.status = 0;
						this.info.status_name = "已取消";
						this.checkSubList();
					}
				});
			},
			checkSubList() {
				this.info.button_list = [];
				if(this.info.status == 1 && this.info.need_sub_num == 0) {
					let cancelBtn = {'type': 'cancel', 'name': '取消'};
					this.info.button_list.push(cancelBtn);
				}
				if(this.info.need_sub_num > 0) {
					let subBtn = {'type': 'all_sub', 'name' : '全部确定'};
					this.info.button_list.push(subBtn);
				}
				this.$forceUpdate();
			},
			callPhone(mobile) {
				uni.makePhoneCall({
				    phoneNumber: mobile
				});
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.id = options.id || 0;
		},
		onShow() {
			if(this.id == 0) {
				uni.showModal({
				    title: '错误提示',
				    content: '错误的访问方式',
					showCancel:false,
				    success: function (res) {
				        if (res.confirm) {
							common.jump("return_one");
						}
					},
				});
				return ;
			}
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		    .orderDetails {
		        padding-bottom: 124rpx !important;
				.bot{
					 padding-bottom: 12px !important;
				}
		    }
		}
	.orderDetails {
		padding-bottom: 100rpx;
		.line {
			box-sizing: border-box;
			padding: 37rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			// font-weight: bold;
			color: #666666;
			border-bottom: 1rpx rgba(235, 236, 240, 1) solid;

			text:last-child {
				color: #FF5F60;
				font-size: 32rpx;
			}

			;
		}
		.content{
			padding: 20rpx 20rpx;
			// display: flex;
			font-size: 20rpx;
			color: #666666;
			// justify-content: space-between;
			// align-items: center;
			border-bottom: 10rpx rgba(57, 72, 107, 0.1) solid;
			.title {
				width: 100%;
				height: 80rpx;
				font-size: 32rpx;
				display: flex;
				view:first-child {
					width:75%;
					padding-left: 16rpx;
				}
				view:last-child{
					width:24%;
					color: red;
					text-align: right;
				}
			}
			.list {
				justify-content: space-between;
				display: flex;
				align-items: center;
				width: 100%;
				text-align: center;
				height: 80rpx;
				font-size: 32rpx;
				view{
					width: 25%;
				}
				.btn{
					margin: 0 20%;
					background: #FFBC00;
					bottom: 0rpx;
					color: #fff;
					border-radius: 3%;
					width: 50%;
				}
			}
			.list:first-child{
				// border-top: 1rpx rgba(57, 72, 107, 0.1) solid;
			}
		}
		.bot {
			position: fixed;
			width: 100%;
			height: 100rpx;
			bottom: 0rpx;
			border-top: 1rpx #EBECF0 solid;
            padding-bottom: env(safe-area-inset-bottom);
			.txt1 {
				box-shadow: 0px 1rpx 0px 0px rgba(235, 236, 240, 1);
				width: 100%;
				height: 100%;
				background: #FFBF0A;
				color: #FFFFFF;
				font-size: 28rpx;
				text-align: center;
				line-height: 100rpx;
				display: flex;
				text {
					background: #FFBF0A;
					color: #FFFFFF;
					height: 100rpx;
					line-height: 100rpx;
					width: 100%;
				}
			}

			.txt2 {
				box-shadow: 0px 1rpx 0px 0px rgba(235, 236, 240, 1);
				display: flex;
				width: 100%;
				height: 100%;

				text {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					width: 50%;
					font-size: 28rpx;
					background: #FFFFFF;
					color: #666666;
				}

				text:last-child {
					background: #FFBF0A;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
